<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <link th:href="@{/css/Semantic-UI-CSS-master/semantic.css}" href="../static/css/Semantic-UI-CSS-master/semantic.css" rel="stylesheet" type="text/css">
  <link th:href="@{/css/typo.css}" href="../static/css/typo.css" rel="stylesheet" type="text/css">
  <link th:href="@{/css/animate.css}" href="../static/css/animate.css" rel="stylesheet" type="text/css">
  <link th:href="@{/css/prism/prism-okaidia.css}" href="../static/css/prism/prism-okaidia.css" rel="stylesheet" type="text/css">
  <link th:href="@{/lib/tocbot/dist/tocbot.css}" href="../static/lib/tocbot/dist/tocbot.css" rel="stylesheet" type="text/css">
  <link th:href="@{/css/main.css}" href="../static/css/main.css" rel="stylesheet" type="text/css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Title</title>
  <script th:src="@{/js/jquery-3.4.0.js}" src="../static/js/jquery-3.4.0.js" type="text/javascript"></script>
  <script th:src="@{/lib/editormd/lib/marked.min.js}" src="../static/lib/editormd/lib/marked.min.js"></script>
  <script th:src="@{/lib/editormd/lib/prettify.min.js}" src="../static/lib/editormd/lib/prettify.min.js"></script>
  <script th:src="@{/lib/editormd/lib/raphael.min.js}" src="../static/lib/editormd/lib/raphael.min.js"></script>
  <script th:src="@{/lib/editormd/lib/underscore.min.js}" src="../static/lib/editormd/lib/underscore.min.js"></script>
  <script th:src="@{/lib/editormd/lib/sequence-diagram.min.js}" src="../static/lib/editormd/lib/sequence-diagram.min.js"></script>
  <script th:src="@{/lib/editormd/lib/flowchart.min.js}" src="../static/lib/editormd/lib/flowchart.min.js"></script>
  <script th:src="@{/lib/editormd/lib/jquery.flowchart.min.js}" src="../static/lib/editormd/lib/jquery.flowchart.min.js"></script>
  <script th:src="@{/lib/editormd/editormd.js}" src="../static/lib/editormd/editormd.js" type="text/javascript"></script>
  <script th:src="@{/css/Semantic-UI-CSS-master/semantic.js}" src="../static/css/Semantic-UI-CSS-master/semantic.js" type="text/javascript"></script>
  <script th:src="@{/js/jquery.scrollTo.js}" src="../static/js/jquery.scrollTo.js" type="text/javascript"></script>
  <script th:src="@{/css/prism/prism.js}" src="../static/css/prism/prism.js" type="text/javascript"></script>
  <script th:src="@{/lib/tocbot/dist/tocbot.js}" src="../static/lib/tocbot/dist/tocbot.js" type="text/javascript"></script>
  <script th:src="@{/lib/waypoints/lib/jquery.waypoints.js}" src="../static/lib/waypoints/lib/jquery.waypoints.js" type="text/javascript"></script>
</head>
<body>
<nav class="ui inverted attached segment" id="nav">
  <div class="ui container">
    <div class="ui inverted secondary menu">
      <h2 class="ui teal header item">Blog</h2>
      <a href="/index" class="item active"><i class="home icon"></i> 首页</a>
      <a href="/type" class="item"><i class="idea icon"></i> 分类</a>
      <a href="/tag" class="item"><i class="tags icon"></i> 标签</a>
      <div class="center item" style="margin-left: 100px">
        <div class="ui input inverted icon transparent">
          <input type="text" placeholder="Search">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
</nav>

<div class="m-container-small">
  <div class="ui container">
    <div class="ui top attached segment">
      <div class="ui horizontal link list">
        <div class="item">
          <img th:src="${blog.user.img}" src="../static/img/brain.jpg" class="ui avatar image">
          <div class="content"><a href="#" class="header" th:text="${blog.user.name}">梅迪乌斯</a></div>
        </div>
        <div class="item" th:text="${blog.updateTime}">
          <i class="calendar icon"></i>2021-01-01
        </div>
      </div>
    </div>
    <div id="content" class="ui attached segment">
      <img th:src="${blog.picture}" src="../static/img/background.jpg" class="ui rounded fluid image">
    </div>
    <div class="ui bottom attached segment">
      <div class="ui right aligned basic segment">
        <div class="ui label basic orange" th:text="${blog.flag}">原创</div>
      </div>
      <h2 class="ui center aligned header" th:text="${blog.title}">博客，数字生活新时尚</h2>
      <div class="content js-toc-content typo typo-selection m-margin-huge" id="doc-content">
        <textarea style="display:none;" placeholder="markdown语言" th:text="${blog.content}">#${md.content }</textarea>
      </div>
      <div th:each="tag:${blog.getTags()}" class="ui basic teal left pointing label m-margin-huge" th:text="${tag.name}">方法论</div>
    </div>
  </div>
</div>
<div id="toolbar" class="m-padded-large m-fixed" style="display: none">
  <div class="ui vertical icon buttons">
    <button type="button" class="ui toc teal button">目录</button>
<!--    <a href="#comment" class="ui teal button">评论</a>-->
    <div id="toTop" class="ui icon button"><i class="chevron up icon"></i></div>
  </div>
</div>
<div id="contentDirectory" class="ui toc-container flowing popup transition hidden">
  <ol class="js-toc">

  </ol>
</div>
<footer class="ui segment vertical">
  <div class="ui center aligned container">
    <div class="ui section divider"></div>
    Copyright ©2019-2023 SimpleBook Designed by Harlaus
    <br>
    备案号：津ICP备20005778号-1公安备案号津公网安备 12011602000448 号
    </p>
  </div>
</footer>
<script type="text/javascript">
  $('.ui.dropdown').dropdown({
    on : 'hover'
  });
  $(function () {
      editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
        htmlDecode: "style,script,iframe", //可以过滤标签解码
        emoji: true,
        taskList:true,
        tex: true,               // 默认不解析
        flowChart:true,         // 默认不解析
        sequenceDiagram:true,
    });
    $('#toTop').click(function () {
      $(window).scrollTo(0);
    });
    tocbot.init({
      tocSelector : '.js-toc',
      contentSelector : '.js-toc-content',
      headingSelector : 'h1,h2,h3,h4'
    });
    var waypoint = new Waypoint({
      element: document.getElementById('content'),
      handler: function(direction) {
        if(direction == "down"){
          $("#toolbar").show(500);
        } else {
          $("#toolbar").hide(500);
        }
      }
    });
    $('.toc.button').popup({
      popup : $('.toc-container.popup'),
      on : 'click',
      position : 'left center'
    });
  });
</script>
</body>
</html>